<div class="content-table">
    <h2><?php echo $this->titulo.$this->titulo_pag; ?></h2>
    
    <div style="margin: 20px 0px;">
        <span class="btn btn-success fileinput-button">
            <i class="icon-plus icon-white"></i>
            <span>Selecione as Imagens</span>
            <input id="fileupload" type="file" name="files[]" multiple>
        </span>
        <br>
        <br>
        <div id="progress" class="progress">
            <div class="progress-bar progress-bar-success"></div>
        </div>
        <?php // <div id="files" class="files"></div> ?>
    </div>
    
    <div id="container" class="cnt_list_gl" style="min-width: 900px;">
    <?php 
        $arr_img = array();
        foreach ($this->result as $row){

                $src = $row->GAL_NOM;
                
                $tam_img = getimagesize($src);

                if($tam_img[0] == $this->img_width) $item = 'pqn';//$tam = 196;
                else $item = 'gnd';//$tam = 394;
      
                $id = $row->GAL_ID;
                $arr_img[$id] = $id;
                ?>
                <div id="cnt_gl_<?php echo $id; ?>" class="cnt_gl item <?php echo $item;?>">
                    <div class="cnt_btn">
                        <ul class="ui-widget ui-helper-clearfix">
                            <li title="Ordem" class="ui-state-highlight ui-corner-all ord_foto" id="<?php echo $id; ?>"><input type="text" class="ord_gal" size="3" maxlength="3" id="<?php echo $id; ?>" value="<?php echo $row->GAL_ORD?>" /></li>
                            <li title="Excluir" class="ui-state-error ui-corner-all del_foto" id="<?php echo $id; ?>"><span class="ui-icon ui-icon-closethick"></span></li>
                        </ul>
                    </div>
                <?php echo '<a href="'.$this->urlbase.'/'.str_replace('_tb.', '.',$src).'" data-lightbox="roadtrip" /><img title="" src="'.$this->urlbase.'/'.$src.'" /></a>'; ?>
                </div>
                <?php
        }
    
    
        //foreach ($this->result as $row) {
            if($this->key > 0) $key = $this->key."_";
            else $key = '';
            $imgs = glob($this->dir.$key.'*_tb.*');
            asort($imgs);
            foreach ($imgs as $key => $src) {
                
                $tam_img = getimagesize($src);

                if($tam_img[0] == $this->img_width) $item = 'pqn';//$tam = 196;
                else $item = 'gnd';//$tam = 394;
      
                $nome = end(explode('/', $src));
                $nome = explode('.', $nome);
                $id = str_replace('_tb', '',$nome[0]);
                
                if(!isset($arr_img[$id])){
                ?>
                <div id="cnt_gl_<?php echo $id; ?>" class="cnt_gl item <?php echo $item;?>">
                    <div class="cnt_btn">
                        <ul class="ui-widget ui-helper-clearfix">
                            <li title="Ordem" class="ui-state-highlight ui-corner-all ord_foto" id="<?php echo $id; ?>"><input type="text" class="ord_gal" size="3" maxlength="3" value="" /></li>
                            <li title="Excluir" class="ui-state-error ui-corner-all del_foto" id="<?php echo $id; ?>" src="<?php echo $this->urlbase.'/'.$src; ?>" ><span class="ui-icon ui-icon-closethick"></span></li>
                        </ul>
                    </div>
                <?php echo '<a href="'.$this->urlbase.'/'.str_replace('_tb.', '.',$src).'" data-lightbox="roadtrip" /><img title="" src="'.$this->urlbase.'/'.$src.'" /></a>'; ?>
                </div>
                <?php
                }
            }
        //}
    ?>
    </div>
    
    
</div>

<?php if($this->tpo > 0) { ?>
        <input type="hidden" name="tpo" class="tpo" value="<?php echo $this->tpo; ?>" />
        <input type="hidden" name="key" class="key" value="<?php echo $this->key; ?>" />
<?php } ?>
        
<script src="<?php echo $this->urlbase.'/public/media/js/masonry.pkgd.min.js'?>"></script>
<script> 
$(function(){

    //var container = document.querySelector('#container');
    //var msnry = new Masonry( container, {
    $('#container').masonry({
      itemSelector: '.item',
      columnWidth: 1
    });
    
    
}); 
</script>


<link  href="<?php echo $this->urlbase.'/public/media/js/lightbox/css/lightbox.css' ?>" rel="stylesheet" media="screen"/>
<script src="<?php echo $this->urlbase.'/public/media/js/lightbox/js/modernizr.custom.js' ?>"></script>
<script src="<?php echo $this->urlbase.'/public/media/js/lightbox/js/lightbox-2.6.min.js' ?>"></script>

<link rel="stylesheet" href="<?php echo $this->urlbase.'/public/media/js/multiupload/css/bootstrap.min.css'; ?>">
<link rel="stylesheet" href="<?php echo $this->urlbase.'/public/media/js/multiupload/css/font-awesome.css'; ?>">
<link rel="stylesheet" href="<?php echo $this->urlbase.'/public/media/js/multiupload/css/jquery.fileupload-ui.css'; ?>" />

<script src="<?php echo $this->urlbase.'/public/media/js/multiupload/'; ?>js/vendor/jquery.ui.widget.js"></script>
<script src="<?php echo $this->urlbase.'/public/media/js/multiupload/'; ?>js/jquery.iframe-transport.js"></script>
<script src="<?php echo $this->urlbase.'/public/media/js/multiupload/'; ?>js/jquery.fileupload.js"></script>
<script>
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = '<?php echo $this->urlbase.'/public/media/js/multiupload/server/php/'; ?>';
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
            if(progress == 100) setTimeout(function(){ window.location.reload(); },5000);
        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>